<style>
.iPhoneXR-mock {
  position: absolute;
  z-index: 7;
  top: 0;
  left: 0;
  width: 435px;
  height: 872px;
  background-size: contain;
  pointer-events: none;
}
</style>

<template>
  <div class="iPhoneXR-mock">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="435"
      height="872"
      viewBox="0 0 870 1744"
    >
      <g transform="translate(-5930 -248)">
        <path
          :fill="borderColor"
          d="M760,1744H110a110.8,110.8,0,0,1-22.169-2.235A109.4,109.4,0,0,1,48.5,1725.214a110.322,110.322,0,0,1-39.853-48.4,109.448,109.448,0,0,1-6.41-20.648A110.812,110.812,0,0,1,0,1634V110A110.806,110.806,0,0,1,2.235,87.831,109.4,109.4,0,0,1,18.786,48.5a110.324,110.324,0,0,1,48.4-39.854,109.48,109.48,0,0,1,20.648-6.41A110.812,110.812,0,0,1,110,0H760a110.815,110.815,0,0,1,22.169,2.235A109.392,109.392,0,0,1,821.5,18.787a110.319,110.319,0,0,1,39.854,48.4,109.438,109.438,0,0,1,6.41,20.648A110.8,110.8,0,0,1,870,110V1634a110.81,110.81,0,0,1-2.235,22.169,109.4,109.4,0,0,1-16.552,39.333,110.322,110.322,0,0,1-48.4,39.854,109.44,109.44,0,0,1-20.648,6.41A110.8,110.8,0,0,1,760,1744ZM120,60a60.067,60.067,0,0,0-60,60V1624a60.068,60.068,0,0,0,60,60H750a60.068,60.068,0,0,0,60-60V120a60.068,60.068,0,0,0-60-60Z"
          transform="translate(5930 248)"
        />
        <line
          x2="260"
          transform="translate(6236.5 1912.5)"
          fill="none"
          stroke="#000"
          stroke-linecap="round"
          stroke-width="10"
        />
        <g transform="translate(1024 -580.918)">
          <g
            transform="translate(5547 977.918)"
            fill="none"
            stroke="#eaeaea"
            stroke-width="2"
          >
            <rect width="156" height="56" rx="28" stroke="none" />
            <rect
              x="0.5"
              y="0.5"
              width="155"
              height="55"
              rx="27.5"
              fill="none"
            />
          </g>
          <path
            d="M.01-.507,0,32.977"
            transform="translate(5626.171 988.274)"
            fill="none"
            stroke="#eaeaea"
            stroke-linecap="round"
            stroke-width="2"
          />
          <g
            transform="translate(5650 988.918)"
            fill="none"
            stroke="#000"
            stroke-width="5"
          >
            <circle cx="15.5" cy="15.5" r="15.5" stroke="none" />
            <circle cx="15.5" cy="15.5" r="13" fill="none" />
          </g>
          <circle
            cx="5.5"
            cy="5.5"
            r="5.5"
            transform="translate(5660 998.918)"
          />
          <circle
            cx="3.5"
            cy="3.5"
            r="3.5"
            transform="translate(5571 1002.918)"
          />
          <circle
            cx="3.5"
            cy="3.5"
            r="3.5"
            transform="translate(5598 1002.918)"
          />
          <circle cx="6" cy="6" r="6" transform="translate(5582 999.918)" />
        </g>
        <path
          d="M4.286-1.607V1.607a.516.516,0,0,1-.536.536H.536A.516.516,0,0,1,0,1.607V-1.607a.521.521,0,0,1,.151-.385.521.521,0,0,1,.385-.151H3.75a.521.521,0,0,1,.385.151A.521.521,0,0,1,4.286-1.607ZM10.714-3.75V1.607a.516.516,0,0,1-.536.536H6.964a.516.516,0,0,1-.536-.536V-3.75a.521.521,0,0,1,.151-.385.521.521,0,0,1,.385-.151h3.214a.521.521,0,0,1,.385.151A.521.521,0,0,1,10.714-3.75Zm6.429-4.286V1.607a.516.516,0,0,1-.536.536H13.393a.516.516,0,0,1-.536-.536V-8.036a.521.521,0,0,1,.151-.385.521.521,0,0,1,.385-.151h3.214a.521.521,0,0,1,.385.151A.521.521,0,0,1,17.143-8.036Zm6.429-6.429V1.607a.516.516,0,0,1-.536.536H19.821a.516.516,0,0,1-.536-.536V-14.464a.521.521,0,0,1,.151-.385A.521.521,0,0,1,19.821-15h3.214a.521.521,0,0,1,.385.151A.521.521,0,0,1,23.571-14.464ZM30-23.036V1.607a.516.516,0,0,1-.536.536H26.25a.516.516,0,0,1-.536-.536V-23.036a.521.521,0,0,1,.151-.385.521.521,0,0,1,.385-.151h3.214a.521.521,0,0,1,.385.151A.521.521,0,0,1,30-23.036Z"
          transform="translate(6582 361)"
          fill="#010101"
        />
        <path
          d="M18.7-1.448q-1.222,1.23-1.557,1.23t-1.557-1.23q-1.222-1.23-1.222-1.565,0-.536,1.046-.9a5.453,5.453,0,0,1,1.733-.368,5.453,5.453,0,0,1,1.733.368q1.046.368,1.046.9Q19.922-2.679,18.7-1.448Zm2.963-3.306a6.9,6.9,0,0,1-.67-.419,9.437,9.437,0,0,0-1.7-.837,5.829,5.829,0,0,0-2.151-.419,5.829,5.829,0,0,0-2.151.419,9.143,9.143,0,0,0-1.691.837,4.828,4.828,0,0,1-.678.419q-.3,0-1.565-1.256T9.794-7.567a.529.529,0,0,1,.167-.385,9.138,9.138,0,0,1,3.281-2.026,10.7,10.7,0,0,1,7.8,0,9.138,9.138,0,0,1,3.281,2.026.529.529,0,0,1,.167.385q0,.3-1.264,1.557T21.663-4.754Zm4.57-4.554a.7.7,0,0,1-.385-.134,19.8,19.8,0,0,0-4.219-2.586,11.349,11.349,0,0,0-4.487-.829,11.416,11.416,0,0,0-2.854.368,13.2,13.2,0,0,0-2.494.887,21.6,21.6,0,0,0-1.9,1.038q-.837.519-1.323.887a4.141,4.141,0,0,1-.519.368q-.285,0-1.54-1.256T5.257-12.121a.512.512,0,0,1,.167-.368,15.294,15.294,0,0,1,5.357-3.432,17.169,17.169,0,0,1,12.723,0,15.294,15.294,0,0,1,5.357,3.432.512.512,0,0,1,.167.368q0,.3-1.256,1.557T26.233-9.308Zm4.537-4.537A.582.582,0,0,1,30.4-14a22.479,22.479,0,0,0-6.219-3.959,18.264,18.264,0,0,0-7.04-1.331,18.264,18.264,0,0,0-7.04,1.331A22.479,22.479,0,0,0,3.884-14a.582.582,0,0,1-.368.151q-.285,0-1.549-1.256T.7-16.657a.529.529,0,0,1,.167-.385,21.782,21.782,0,0,1,7.45-4.821,23.645,23.645,0,0,1,17.645,0,21.782,21.782,0,0,1,7.45,4.821.529.529,0,0,1,.167.385q0,.3-1.264,1.557T30.77-13.845Z"
          transform="translate(6621 363)"
        />
        <path
          d="M32.143-17.143V-4.286H4.286V-17.143ZM34.286-7.5h2.143v-6.429H34.286V-18.75a.521.521,0,0,0-.151-.385.521.521,0,0,0-.385-.151H2.679a.521.521,0,0,0-.385.151.521.521,0,0,0-.151.385V-2.679a.521.521,0,0,0,.151.385.521.521,0,0,0,.385.151H33.75a.521.521,0,0,0,.385-.151.521.521,0,0,0,.151-.385Zm4.286-6.429V-7.5a2.065,2.065,0,0,1-.628,1.515,2.065,2.065,0,0,1-1.515.628v2.679a2.579,2.579,0,0,1-.787,1.892A2.579,2.579,0,0,1,33.75,0H2.679A2.579,2.579,0,0,1,.787-.787,2.579,2.579,0,0,1,0-2.679V-18.75a2.579,2.579,0,0,1,.787-1.892,2.579,2.579,0,0,1,1.892-.787H33.75a2.579,2.579,0,0,1,1.892.787,2.579,2.579,0,0,1,.787,1.892v2.679a2.065,2.065,0,0,1,1.515.628A2.065,2.065,0,0,1,38.571-13.929Z"
          transform="translate(6664 363)"
        />
        <path
          :fill="borderColor"
          d="M0,0H466a0,0,0,0,1,0,0V64a54,54,0,0,1-54,54H54A54,54,0,0,1,0,64V0A0,0,0,0,1,0,0Z"
          transform="translate(6132 248)"
        />
        <line
          x2="100"
          transform="translate(6315.5 318.5)"
          fill="none"
          stroke="#f0f3f5"
          stroke-linecap="round"
          stroke-width="16"
        />
        <circle
          cx="12.5"
          cy="12.5"
          r="12.5"
          transform="translate(6446 306)"
          fill="#f0f3f5"
        />
        <text
          y="105"
          fill="black"
          x="100"
          transform="translate(5930, 250)"
          style="font-size: 30px;font-weight: bold;"
        >
          {{ time }}
        </text>
      </g>
    </svg>
  </div>
</template>

<script>
export default {
  data: () => ({
    d: new Date()
  }),
  computed: {
    borderColor() {
      return this.$root.$vuetify.theme.currentTheme.primary
    },
    time() {
      return this.d.getHours() + ':' + ('00' + this.d.getMinutes()).slice(-2)
    }
  },
  created() {
    this.start()
  },
  methods: {
    start() {
      setInterval(() => {
        this.d = new Date()
      }, 1000)
    }
  }
}
</script>
